import React from "react";
import ReactDom from "react-dom";

class Tabs extends React.Component{
  constructor(props={list:[]}){
    super(props);
    this.state = {
      list:this.props.list,
      currentName:null
    }
  }

  selectd(name){
    this.setState({currentName:name})
  }

  render(){

    let tabs =[];
    let div;
    this.state.list.forEach(tab=>{
      tabs.push(<a className={this.state.currentName===tab.name?"active":""} key={tab.name} onClick={()=>this.selectd(tab.name)}>{tab.name}</a>);
      if(this.state.currentName===tab.name){888
      div = <div>{tab.body}</div>;
      }
    });
    return <div className="tabs">
      <nav>
        {tabs}
      </nav>
      {div}
    </div>
  }
}

const list = [
  {name:"A",body:"aaaaaaaaaaaa"},
  {name:"B",body:"bbbbbbbbbbbb"},
  {name:"C",body:"cccccccccccc"},
  {name:"D",body:"dddddddddddd"}
]
ReactDom.render(<Tabs list={list}/>,document.body);
